import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import { Button } from "antd";
import { useEffect } from "react";

function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <>
      <p>出错了组件</p>
      <pre>{error.message}</pre>
      <Button onClick={resetErrorBoundary}>再试一次</Button>
    </>
  );
}

function ComponentThatMayError() {
  useEffect(() => {
    throw Error("错误");
  }, []);
  return <h3>错误</h3>;
}

function TestErrorBoundary() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <ComponentThatMayError />
    </ErrorBoundary>
  );
}

export default TestErrorBoundary;
